<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件处理2</title>
    <style>
        .demo {
            background-color: #bfa;
            padding: 10px;
        }

        .box {
            background-color: orange;
            padding: 10px;
        }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>欢迎来到{{county}}</h2>
    <!-- 1.v-on:click 绑定-->
    <button v-on:click="show1">v-on:click绑定点我展示信息1</button>
    <br>
    <!--2.@click简写 -->
    <button @click="show1">@click简写点我展示信息1</button>
    <br>
    <!-- 3.传参 -->
    <button @click="show2(666,$event)">传参方式$event 点击显示信息2</button>
    <br>
    <!-- 阻止默认行为 @click.prevent 用事件修饰符来阻止默认行为 -->
    <a href="https://www.baidu.com" @click.prevent="show3">点击跳转到百度</a> <br>
    <!--  阻止冒泡 @click.stop  -->
    <div class="demo" @click="show4">
        <button @click.stop="show4">点我展示信息4</button>
    </div>
    <br>
    <!--    同时阻止默认行为和冒泡 @click.stop.prevent-->
    <div class="box" @click="show4">
        <a @click.stop.prevent="show4" href="https://www.baidu.com">点击我跳转到百度</a>
    </div>

    <h2>键盘事件 常用的键盘事件</h2>
    <hr>
    <input type="text" @keyup.enter="show5" placeholder="按下回车键提示信息">
    <input type="text" @keyup.esc="show6" placeholder="按下esc键提示信息">
    <input type="text" @keyup.q="show6" placeholder="按下q键提示信息">
    <input type="text" @keyup.13="show6" placeholder="按下回车提示信息">
    <input type="text" @keyup.left="show6" placeholder="'按下左箭头键提示信息">
    <input type="text" @keyup.arrow-left="show6" placeholder="'按下左箭头键提示信息">
    <input type="text" @keyup.a.b="show" placeholder="按下a或者b提示信息">
    <!--    按键修饰符 不常用-->
    <input type="text" @keyup.alt.a="show6" placeholder="按下alt键的同时再按下a键提示信息">
    <input type="text" @keyup.ctrl.a="show6" placeholder="按下ctrl键的同时再按下a键提示信息">
    <input type="text" @keyup.shift.a="show6" placeholder="按下shift键的同时再按下a键提示信息">
    <input type="text" @keyup.meta.a="show6" placeholder="按下meta键的同时再按下a键提示信息">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false//禁止提示生产提示
    new Vue({
        el: "#root",
        data() {
            /* console.log(this)//this指向Vue的实例对象vm*/
            return {
                county: "china"
            }
        },
        methods: {
            show1(e) {
                console.log(e.target.value)
            },
            show2(e) {
                console.log(e.target.value)
            },
            show3(e) {
                //e.preventDefault()//程序员自己写的阻止默认行为
                console.log(e.target.value)
            },
            show4(e) {
                //e.stopPropagation()//程序员自己写的阻止冒泡
                console.log(e.target.value)
            },
            show5(e) {
                console.log(e.target.value)
            },
            show6(e) {
                console.log(e.target.value)
            }
        }
    })
</script>
</body>
</html>